<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="animate.css">
  <script src="vue.js"></script>
  <script src="./velocity.min.js"></script>
</head>
<body>
  <div id="app">

    <!-- 使用animated实现动画 -->
    <button @click="show=!show">显示/隐藏</button>
    <transition enter-active-class="animated animate__shakeY"
     leave-active-class="animated bounceOutLeft">
      <p v-if="show">使用animated实现动画</p>
    </transition>

    <!-- 使用velocity实现动画 -->
    <button @click="show2=!show2">显示/隐藏</button>
    <transition @before-enter="beforeEnter" @entry="entry" v-bind:css="false">
      <p v-if="show2">使用velocity实现动画</p>
    </transition>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: { show: true ,show2: true},
      methods:{
        beforeEnter (el) {
          el.style.opacity = 0				      // 透明度为0
          el.style.transformOrigin = 'left'	// 设置旋转元素的基点位置
          el.style.color = 'red'			    	// 颜色为红色
        },
        entry(el,done){
            Velocity(el,{opacity: 1, fontSize: '1.4em',rotateZ: '45deg', translateY: '30px', translateX: '30px'},{ duration: 300 })
            Velocity(el,{opacity: 1, fontSize: '1em',rotateZ: '45deg', translateY: '30px', translateX: '30px'},{ duration: 300 })
            Velocity(el,{opacity: 1, fontSize: '1.4em',rotateZ: '45deg', translateY: '30px', translateX: '30px'},{ duration: 300 },{complete: done})
        }
      }
    })
 </script>
</body>
</html>